import React from 'react'
import ContentAdd from 'material-ui/svg-icons/content/add';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';

export default class QuestionAdder extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            open: false,
            title: '',
        }

        this.handleOpen = this.handleOpen.bind(this)
        this.handleClose = this.handleClose.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    handleClose() {
        this.setState({
            open: false
        })
    }

    handleOpen() {
        this.setState({
            open: true
        })
    }

    handleChange(e) {
        const t = e.target
        this.setState({
            title: t.value
        })
    }

    render() {
        const addOptionActions = [
            <FlatButton
                label="Cancel"
                primary={true}
                onClick={this.handleClose}
            />,
            <FlatButton
                label="OK"
                primary={true}
                // keyboardFocused={true}
                onClick={() => {
                    this.handleClose()
                    this.props.addOption(this.state.title)
                }}
            />,
        ]

        return (
            <div>
                <IconButton onClick={this.handleOpen} children={<ContentAdd/>}/>
                <Dialog
                    title='Option'
                    actions={addOptionActions}
                    modal={false}
                    open={this.state.open}
                    contentStyle={{width: '350px'}}
                    onRequestClose={this.handleClose}>

                    <TextField
                        value={this.state.title}
                        hintText="Please enter option"
                        name="option"
                        onChange={this.handleChange}
                        floatingLabelText="Option"
                    />

                </Dialog>
            </div>
        )
    }
}